<template>
  <div>
    <p>name:{{user.name}}</p>
    <p>age:{{user.age}}</p>
    <p>count:{{user.count}}</p>
    <p><button @click="deleteAge">删除age</button></p>
    <p><button @click="add">添加属性count</button></p>
    <p><button @click="user.count++">count++</button></p>
    <p><button @click="testArray">test Array</button></p>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
    data(){
        return {
            user:{
                age:10,
                name:'atguigu'
            },
            arr:[1,2,3]
        }
    },
    methods:{
        deleteAge(){
            Vue.delete(this.user, 'age')
            // delete this.user.age
            console.log(this)
        },
        add(){
            //this.user.count = 100 // 对象新增以前不存在的属性，没有响应式
            console.log(this)
            Vue.set(this.user, 'count', 100)
        },
        testArray(){
            console.log(this.arr.push === Array.prototype.push)
        }
    }
}
</script>

<style>

</style>